<template>
    <div>
        <table>
            <tr>
                <td>图片</td>
                <td>学生名字</td>
                <td>学生性别</td>
                <td>个人简介</td>
                <td>负责老师</td>
                <td>浏览次数</td>
            </tr>
            <tr v-for="stu in student_list" :key="stu.id">
                <td>
                    <img :src="src + stu.stu_icon" alt="" width="88">
                </td>
                <td>{{stu.stu_name}}</td>
                <td>{{stu.stu_sex}}</td>
                <td>{{stu.stu_describe}}</td>
                <td>{{stu.teacher}}</td>
                <td>{{stu.count}}</td>
            </tr>
        </table>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data() {
        return {
            student_list:[],
            base_url:'http://127.0.0.1:8000',
            src:'http://127.0.0.1:8000/uploads',
        }
    },
    methods: {
        get(){
            this.axios({
                url: this.base_url + '/app01/show',
                method:'get',
            }).then(res =>{
                console.log(res.data)
                this.student_list = res.data
            }).catch(error =>{
                console.log(error)
            })
        }    
            
  
    },
    created() {
        this.get()
    }
}
</script>

<style>
table{
    width: 500px;
    /* height: 500px;  */
    border: solid black;
    margin: 0 auto;
    border-collapse:collapse
}
th,td{
    border: green solid;
    border-collapse:collapse
}
a{
    padding: 5px 10px;
    border: 1px solid lightblue;
    margin-right: 10px;
    cursor: pointer;
}
</style>